<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding:0;
    }
    ul{
        list-style: none;
    }
    li{
        width: 100px;
        height: 30px;
        margin: 0 5px;
        background-color: gray;
        float: left;
    }

</style>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="audio">
        <audio src="./video/1.mp3"></audio>
        <audio src="./video/2.mp3"></audio>
        <audio src="./video/3.mp3"></audio>
        <audio src="./video/4.mp3"></audio>
        <audio src="./video/5.mp3"></audio>
        <audio src="./video/6.mp3"></audio>
        <audio src="./video/7.mp3"></audio>
    </div>

    <button id="btn3">播放录制的音乐</button>  

    <header>
        <!-- 头部 -->
    </header>
    <section>
        <!-- 中间 -->
    </section>
 
    <footer>
        <!-- 页脚 -->
    </footer>    
    
    <script src="./js/jquery-3.2.1.js"></script>
    <script>
        $("#btn3").click(function() {
            var str = localStorage.getItem("qp");//保存到本地！
            var arr = JSON.parse(str);//把字符串转换成对象
            var i = 0;
            var t = setInterval(function() {//定时器
                
                if (i >= arr.length) {
                    clearInterval(t)//清除定时器
                    return ;
                }
                var a = $("audio").get(arr[i])
                a.load();//暂停/重载
                a.play();//播放
                i++;
            }, 500)
        })
        var arr = [];
        $(document).keydown(function(e) {
            var i = e.keyCode - 49;//获取键盘事件
            arr.push(i);//将arr的已获取值压入i这个数组内
            var s = JSON.stringify(arr);//把对象再转变成字符串
            localStorage.setItem("qp", s)//获取本地已储存的值/对象/文件
            var a = $("audio").get(i)
            a.load();
            a.play();
            
        })
    </script>
</body>
</html>